/*
  学习目标：生命周期- 挂载阶段
  步骤：
     1. constructor
     2. render
     3. componentDidMount
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 对标:  created创建时
  // 场景: 💥 早期写法现在几乎不用
  // 注意: ❌ 不再constructor中发请求
  // 1. 声明state
  // 2. 创建ref
  constructor() {
    // 💥 super()表示继承爸爸所有的属性和方法, 固定语法, 不写报错
    super();
    console.log(' constructor ----->  ');
    this.state = {
      count: 100,
    };
  }

  // 作用: 渲染界面
  render() {
    console.log('render  ----->  ');
    return <div>App - {this.state.count}</div>;
  }

  // 对标: mounted 挂载后
  // 场景:
  // 1. 💥发请求
  // 2. 最新获取dom/开启定时器
  componentDidMount() {
    console.log('componentDidMount  ----->  ');
  }
}

// 总结:
// 1. 几个钩子函数
// 1.1 constructor:  this.state= {}
// 注意:💥 1. 不在发请求  2. 必须调用super()
// 1.2 render
// 1.2 componentDidMount  cdm
// 场景: 1💥 发请求  2. 获取dom  3. 开启定时器之类的
